<template>
  <div class="container">
    <el-upload
      class="upload-demo"
      ref="upload"
      action="/api/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :auto-upload="false"
      :show-file-list="true"
      :limit="limit"
      :on-exceed="on_exceed"
      :on-success="uploadsuccess"
      :file-list="filelist"
      :data="userdata"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <div slot="tip" class="el-upload__tip">
        请先选取作业文件，后点击上传到服务器!
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      limit: 1,
      userdata:{
          courseid:"",
          hwid:"",
          username:""
      },
      filelist:[]
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    on_exceed() {
      this.$Toast({
        content: "只能上传一个文件！",
        type: "error",
      });
    },
    uploadsuccess(res) {
        this.$refs.upload.clearFiles();
      this.$Toast({
        content: res.msg,
        type: res.type,
      });
    },
  },
  mounted() {
    this.userdata["courseid"]=this.$route.params["courseid"];
    this.userdata["hwid"]=this.$route.params["hwid"];
    this.userdata["username"]=localStorage.getItem("username");
  },
};
</script>
<style lang="less" scoped>
</style>
